<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- 1. 文件选择框 -->
  <input type="file" id="file1" />
  <!-- 2. 上传文件的按钮 -->
  <button id="btnUpload">上传文件</button>
  <br />
  <!-- 3. img 标签，来显示上传成功以后的图片 -->
  <img src="" alt="" id="img" width="800" />

  <script>
    // 接口地址： http://www.liulongbin.top:3006/api/upload/avatar

    // 1. 获取到文件上传按钮
    const btnUpload = document.querySelector('#btnUpload')


    // 2. 为按钮绑定单击事件处理函数
    btnUpload.addEventListener('click', function () {
      // 3. 获取到用户选择的文件列表
      const file1 = document.querySelector('#file1')
      if (file1.files.length <= 0) {
        return alert('请选择文件')
      }
      console.log(file1.files[0]);

      const fd = new FormData()
      fd.append('avatar', file1.files[0])

      const xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
      xhr.send(fd)
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          // console.log(xhr.responseText);

          document.querySelector('img').src = `http://www.liulongbin.top:3006${JSON.parse(xhr.responseText).url}`
        }
      }
    })
  </script>
</body>

</html>